<page-header [action]="phActionTpl">
  <ng-template #phActionTpl></ng-template>
</page-header>

<nz-card *ngIf="isAdmin">
  <form nz-form class="search__form">
    <div nz-row [nzGutter]="{ xs: 8, sm: 8, md: 8, lg: 24, xl: 48, xxl: 48 }">
      <div nz-col nzMd="6" nzSm="24">
        <nz-form-item>
          <nz-cascader
            [nzShowSearch]="true"
            [nzOptions]="companyShopOptions"
            [(ngModel)]="values"
            (ngModelChange)="onChanges($event)"
            name="shopId"
          ></nz-cascader>
        </nz-form-item>
      </div>
    </div>
  </form>
</nz-card>
<nz-spin *ngIf="loading" class="modal-spin"></nz-spin>
<div *ngIf="!loading">
  <div nz-row [nzGutter]="24" class="pt-lg">
    <div nz-col nzXs="24" nzSm="12" nzMd="12" nzLg="6">
      <g2-card [title]="'目前在售'" [total]="statistics['online'] + ''" contentHeight="44px" [action]="action1">
        <ng-template #action1>
          <i nz-tooltip [nzTooltipTitle]="'在售商品数'" nz-icon nzType="info-circle"></i>
        </ng-template>
      </g2-card>
    </div>
    <div nz-col nzXs="24" nzSm="12" nzMd="12" nzLg="6">
      <g2-card [title]="'沉淀商品数'" [total]="statistics['item_view_thirty_days'] + ''" contentHeight="44px" [action]="action4">
        <ng-template #action4>
          <i nz-tooltip [nzTooltipTitle]="'近30天总曝光量5000以上的商品数量'" nz-icon nzType="info-circle"></i>
        </ng-template>
      </g2-card>
    </div>
    <div nz-col nzXs="24" nzSm="12" nzMd="12" nzLg="6">
      <g2-card
        [title]="'商品上新'"
        [total]="statistics['merchant_new'] + '&nbsp;|&nbsp;' + statistics['merchant_not_item_code']"
        contentHeight="44px"
        [action]="action14"
      >
        <ng-template #action14>
          <i nz-tooltip [nzTooltipTitle]="'近7天商品上新数量｜近7天商品上新数量（无商品货号）'" nz-icon nzType="info-circle"></i>
        </ng-template>
      </g2-card>
    </div>
    <div nz-col nzXs="24" nzSm="12" nzMd="12" nzLg="6">
      <g2-card [title]="'差评ODR'" [total]="formatPercent(statistics['negative_odr'])" contentHeight="44px" [action]="action5">
        <ng-template #action5>
          <i
            nz-tooltip
            [nzTooltipTitle]="'近180天差评数：' + statistics['negative_comment_count'] + '，评论数：' + statistics['comment_count']"
            nz-icon
            nzType="info-circle"
          ></i>
        </ng-template>
      </g2-card>
    </div>
    <div nz-col nzXs="24" nzSm="12" nzMd="12" nzLg="6">
      <g2-card [title]="'缺货ODR'" [total]="formatPercent(statistics['lack_odr'])" contentHeight="44px" [action]="action6">
        <ng-template #action6>
          <i nz-tooltip [nzTooltipTitle]="'缺货ODR'" nz-icon nzType="info-circle"></i>
        </ng-template>
      </g2-card>
    </div>
    <div nz-col nzXs="24" nzSm="12" nzMd="12" nzLg="6">
      <g2-card [title]="'缺货次数'" total="{{ statistics['cancel_count'] + '' }}" contentHeight="44px" [action]="action8">
        <ng-template #action8>
          <i nz-tooltip [nzTooltipTitle]="'近7天缺货情况'" nz-icon nzType="info-circle"></i>
        </ng-template>
      </g2-card>
    </div>
    <div nz-col nzXs="24" nzSm="12" nzMd="12" nzLg="6">
      <g2-card [title]="'昨日流量状态'" [total]="statistics['yesterday_view_count'] + ''" contentHeight="44px" [action]="action7">
        <ng-template #action7>
          <i nz-tooltip [nzTooltipTitle]="'昨日店铺内所有商品详情页被浏览次数的累加'" nz-icon nzType="info-circle"></i>
        </ng-template>
      </g2-card>
    </div>
  </div>

  <div nz-row [nzGutter]="24" class="pt-lg">
    <div nz-col nzXs="24" nzSm="24" nzMd="12" nzLg="12">
      <nz-card [nzTitle]="'周期售后情况'" [nzBordered]="false" class="mb-lg">
        <div nz-row>
          <div nz-col nzXs="24" nzSm="12" nzMd="12">
            <number-info [subTitle]="preNotice" [total]="statistics['pre_after_sale_count']"></number-info>
          </div>
          <div nz-col nzXs="24" nzSm="12" nzMd="12">
            <number-info [subTitle]="cNotice" [total]="statistics['c_after_sale_count']"></number-info>
          </div>
        </div>
      </nz-card>
    </div>
    <div nz-col nzXs="24" nzSm="24" nzMd="12" nzLg="12">
      <nz-card [nzTitle]="'切实库'" [nzBordered]="false" class="mb-lg">
        <div nz-row>
          <div nz-col nzXs="24" nzSm="12" nzMd="8">
            <number-info [subTitle]="'是否切为实库销售'" [total]="statistics['trans_flag'] == 1 ? '是' : '否'"></number-info>
          </div>
          <div nz-col nzXs="24" nzSm="12" nzMd="8">
            <number-info [subTitle]="'最近切实库时间'" [total]="statistics['trans_at']"></number-info>
          </div>
          <div nz-col nzXs="24" nzSm="12" nzMd="8">
            <number-info
              [subTitle]="'近60天切实库次数'"
              [total]="statistics['trans_times'] ? statistics['trans_times'] : '--'"
            ></number-info>
          </div>
        </div>
      </nz-card>
    </div>
    <div nz-col nzXs="24" nzSm="24" nzMd="12" nzLg="12">
      <nz-card [nzTitle]="'近7日流量'" [nzBordered]="false" class="mb-lg">
        <div nz-row>
          <div nz-col nzXs="24" nzSm="12" nzMd="8">
            <number-info [subTitle]="'商品浏览量'" [total]="statistics['ctm_item_view_pv_seven_days']"></number-info>
          </div>
          <div nz-col nzXs="24" nzSm="12" nzMd="8">
            <number-info [subTitle]="'加购件数'" [total]="statistics['cart_item_num_seven_days']"></number-info>
          </div>
          <div nz-col nzXs="24" nzSm="12" nzMd="8">
            <number-info [subTitle]="'订单确认数'" [total]="statistics['item_verified_cnt_seven_days']"></number-info>
          </div>
        </div>
      </nz-card>
    </div>
    <div nz-col nzXs="24" nzSm="24" nzMd="12" nzLg="12">
      <nz-card [nzTitle]="'近30日流量'" [nzBordered]="false" class="mb-lg">
        <div nz-row>
          <div nz-col nzXs="24" nzSm="12" nzMd="8">
            <number-info [subTitle]="'商品浏览量'" [total]="statistics['ctm_item_view_pv_thirty_days']"></number-info>
          </div>
          <div nz-col nzXs="24" nzSm="12" nzMd="8">
            <number-info [subTitle]="'加购件数'" [total]="statistics['cart_item_num_thirty_days']"></number-info>
          </div>
          <div nz-col nzXs="24" nzSm="12" nzMd="8">
            <number-info [subTitle]="'订单确认数'" [total]="statistics['item_verified_cnt_thirty_days']"></number-info>
          </div>
        </div>
      </nz-card>
    </div>
  </div>
</div>
